<template>
  <view>
    <!-- 顶部bar -->
    <uni-nav-bar :fixed="true" backgroundColor="#00a660" color="#fff" height="90rpx">
      <block slot="left">
        <i class="iconfont nav_backIcon" @click="toBack">&#xe8b8;</i>
        <span style="font-size: 30rpx;">签字章详情</span>
      </block>
      <block slot="right">
        <view class="nav_btn">
          <button
              v-if="form.isDefault == 0 && form.isOften == 1"
              @click="toDefaultSeal"
              class="nextBtn"
              size="mini"
          > 设为默认
          </button>
          <button
              v-if="form.isSystem == 0 && form.isDefault == 0"
              class="nextBtn"
              size="mini"
              @click="toDeleteSeal(form)"
          >删除
          </button>
        </view>
      </block>
    </uni-nav-bar>
    <!-- 标题 -->
    <view class="seal_page">
      <view class="title">
        <h3>{{ form.name }}</h3>
        <view v-if="form.isSystem == 0 && form.isDefault == 0 ">
          <button class="white_btn" size="mini" @click="toIsOftenSeal()" v-if="form.isOften == 1">停用签字章</button>
          <button class="white_btn" size="mini" @click="toIsOftenSeal()" v-else>启用签字章</button>
        </view>
      </view>
      <!-- 内容 -->
      <view class="seal_field">
        <view class="swiplist">
          <!-- 印章图片 -->
          <img :src="'data:image/png;base64,' + form.image" alt="" class="sealImg" @click="previewPic">
          <!-- 分割线 -->
          <view class="line"></view>
          <view style="text-align: center;margin-right: 30rpx;">
            <view style="color: #00a660;font-size: 60rpx;margin: 10rpx 0;">{{ form.contractCount }}</view>
            <span class="header">用印合同数</span>
          </view>
        </view>
        <p class="desc">
          <span class="header">默认印章：</span>
          <uni-tag text="是" type="success" size="small" v-if="form.isDefault == 1"/>
          <uni-tag text="否" type="warning" size="small" v-else/>
        </p>
        <p class="desc">
          <span class="header">印章类型：</span>
          <span v-if="form.isSystem == 1" style="color: #00a660;">系统印章</span>
          <span v-else>个人印章</span>
        </p>
        <p class="desc"><span class="header">印章归属：</span>{{ form.staffName }}</p>
        <p class="desc"><span class="header">印章编号：</span>{{ form.sealNumber }}</p>
        <p class="desc"><span class="header">创建时间：</span>{{ form.createTime }}</p>
        <p class="desc"><span class="header">系统印章：</span>
          <uni-tag text="是" type="success" size="small" v-if="form.isSystem == 1"/>
          <uni-tag text="否" type="warning" size="small" v-else/>
        </p>
      </view>
      <!-- tab -->
      <view class="swiplist">
        <swiperTabHead :tabBars="tabList" :tabIndex="tabIndex" @tabtap="handleTabChange"></swiperTabHead>
      </view>
    </view>
    <!-- 用印记录 -->
    <view v-show="tabIndex == 0">
      <seal-use-record ref="sealUseRecord" :data="form"/>
    </view>
    <!-- 变更记录 -->
    <view v-show="tabIndex == 1">
      <seal-edit-record ref="sealEditRecord" :data="form"/>
    </view>
  </view>
</template>

<script>
import swiperTabHead from "@/components/slideTab/slideTab"
import SealUseRecord from "./sealUseRecord";
import SealEditRecord from "./sealEditRecord";
import {
  delSealPerson,
  getSealPerson,
  updateEcSealPersonIsOften,
  updateSealPersonDefault
} from "@/api/ec/person/user/sealPerson";

export default {
  components: {swiperTabHead, SealUseRecord, SealEditRecord},
  data() {
    return {
      // 印章信息
      form: {},
      // tab选项
      tabList: [
        {title: '用印记录'},
        {title: '变更记录'}
      ],
      tabIndex: 0,
    }
  },
  onLoad(option) {
    if (option.item) {
      this.form = JSON.parse(option.item)
    }
    this.getSealPersonInfo()
  },

  /** 上拉刷新回调 */
  onReachBottom() {
    if (this.tabIndex == 0) {
      this.$refs.sealUseRecord.loadMore();
    } else {
      this.$refs.sealEditRecord.loadMore();
    }
  },

  methods: {
    /** 返回 */
    toBack() {
      uni.navigateBack({delta: 1})
      uni.$emit("refreshSealPersonData", 1)
    },
    /** 获取印章详情 */
    getSealPersonInfo() {
      this.$modal.loading();
      getSealPerson(this.form.id).then(response => {
        uni.hideLoading()
        // 绑定数据
        this.form = response.data;
        // 默认加载第一个tab数据
        this.$refs.sealUseRecord.handleQuery();
      }).catch(() => {
        uni.hideLoading()
      });
    },
    /** 预览图片 */
    previewPic() {
      uni.previewImage({urls: ['data:image/png;base64,' + this.form.image], current: 0});
    },
    /** 导航切换 */
    handleTabChange(index) {
      this.tabIndex = index;
      if (index == 0) {
        this.$refs.sealUseRecord.handleQuery();
      } else {
        this.$refs.sealEditRecord.handleQuery();
      }
    },
    /** 设置默认印章 */
    toDefaultSeal() {
      let id = this.form.id;
      let isDefault = 1;
      const param = {id, isDefault}
      this.$modal.loading();
      updateSealPersonDefault(param).then(() => {
        uni.hideLoading()
        this.$modal.msgSuccess("默认签字章设置成功！");
        setTimeout(() => {
          this.getSealPersonInfo();
        }, 500);
      }).catch(() => {
        this.$modal.msgError("默认签字章设置失败，请稍后重试！")
        uni.hideLoading()
      });
    },
    /** 设置印章是否常用状态 */
    toIsOftenSeal() {
      let id = this.form.id;
      let isOften = (this.form.isOften == 1) ? 0 : 1;
      const param = {id, isOften}
      this.$modal.loading();
      updateEcSealPersonIsOften(param).then(() => {
        uni.hideLoading()
        this.$modal.msgSuccess((this.form.isOften == 1) ? "签字章已停用！" : "签字章已启用！");
        setTimeout(() => {
          this.getSealPersonInfo();
        }, 500);
      }).catch(() => {
        this.$modal.msgError((this.form.isOften == 1) ? "签字章启用失败，请稍候再试！" : "签字章停用失败，请稍候再试！");
        uni.hideLoading()
      });
    },
    /** 删除签名信息 */
    toDeleteSeal(item) {
      let that = this
      uni.showModal({
        title: '系统提示',
        confirmColor: '#00a660',
        content: '确定要删除 "' + item.name + '" 吗？',
        success: res=> {
          if (res.confirm) {
            if (item.contractCount > 0) {
              that.$modal.msgError("该签字章已签署过合同，暂时无法删除！")
              return;
            }
            delSealPerson(item.id).then(() => {
              this.$modal.msg("删除成功")
              setTimeout(() => {
                that.toBack()
              }, 500)
            }).catch(() => {
              that.$modal.msgError("删除失败，请稍后重试！")
            });
          } else if (res.cancel) {
          }
        },
      })
    },
  }
}
</script>

<style lang="scss" scoped>
	::v-deep .uni-navbar__header-btns-left {
	  width: 220rpx !important;
	}
	
	::v-deep .uni-navbar__header-btns-right {
	  width: 420rpx !important;
	}
.bor_add {
  text-align: center;
  color: $uni-color-primary;

  span {
    margin-left: 5rpx;
  }
}

.line {
  height: 150rpx;
  content: '';
  width: 1rpx;
  background: #ccc;
}

.delete {
  display: flex;
  align-items: center;
  color: #999999;
  font-size: 28rpx;
}

::v-deep .uni-popup .uni-popup__wrapper {
  width: 90%;
}

::v-deep .uni-popup-dialog {
  width: 100%;
}

::v-deep .dropdown-item__content .list {
  right: 25rpx;
}

.swiplist {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header {
  color: #9ea0a3;
}

.seal_page {
  padding: 30rpx 30rpx 0 30rpx;
  background: #fff;
}

.sealImg {
  height: 260rpx;
  border: 1rpx solid #e6e8ea;
  border-radius: 12rpx;
  margin: 20rpx 0;
  width: 40%;
  object-fit: contain;
}

.desc {
  line-height: 48rpx;
  font-size: 24rpx;
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; //显示行数
    white-space: nowrap;
    width: 70%;
  }
}
</style>
